<template>
	<!-- view标签类似于div标签(块元素) -->
	<!--  hover-class:按下的样式   hover-stay-time:手指按下触发的毫秒数 -->
	<view class="box" hover-class="boxHover" hover-stay-time="200">
		<!-- hover-stop-propagation:阻止子元素冒泡到父元素 -->
	<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>
	<view>-----------text文本组件------------</view>
	<!-- text标签类似于span标签(行内元素) -->
	<!--selectable:可复制  -->
	<!-- space:是否连续空格 -->
	<text selectable space='emsp'>12 3</text>
	<view>----------scroll-view组件----------</view>
	<!-- scroll-y:y轴的滚动条 -->
	<scroll-view scroll-y class="scrollViewY">
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
		<view>scroll的子元素</view>
	</scroll-view>
	
	<scroll-view scroll-x class="scrollViewX">
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
		<view class="boxScrollX">scroll的子元素</view>
	</scroll-view>
</template>

<script setup>

	
</script>

<style lang="scss">
	.box {
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	// 手指按下的样式
	.boxHover {
		background-color: orange;
		// width: 200px;
	}
	.inner {
		width: 160px;height: 150px;background: green;
	}
	.innerHover{
		background: greenyellow;
	}
	.scrollViewY {
		width: 80%;
		height: 220px;
		border: 1px solid #fff;
		.boxScrollX {
			width: 100px;
			height: 100px;
			background: green;
		}
	}
	.scrollViewX {
		width: 80%;
		height: 120px;
		border: 1px soild #fff;
		// 当块元素使用display变成行内元素时,无法一行展示时,添加white-space: nowrap;(一行展示)
		white-space: nowrap;
		.boxScrollX {
			width: 100px;
			height: 100px;
			margin: 1px;
			background: greenyellow;
			// 行内元素
			display: inline-block;
		}
	}
</style>
